<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>我的首页</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../less/home-left.css">
    <link rel="stylesheet" href="../less/home-modal.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
    <link rel="stylesheet" href="../lib/Highlight/css/an-old-hope.min.css">
    <script src="../lib/Highlight/js/highlight-min.js"></script>
    <script src="../lib/Highlight/js/highlight-line-numbers.min.js"></script>
    <script>
        hljs.highlightAll();
        hljs.initLineNumbersOnLoad();
    </script>
</head>
<body>
<section class="section-home-box">
    <div id="top-open"></div>
    <div class="section-home">
        <div class="home-box">
            <div class="home-box-left">
                <div class="home-left-title">
                    <ul>
                        <li><span class="home-title-active"></span><a href="">全部</a></li>
                        <li><a href="">原创</a></li>
                        <li><a href="">图片</a></li>
                        <li><a href="">视频</a></li>
                        <li><a href="">音乐</a></li>
                        <li><a href="">文章</a></li>
                    </ul>
                </div>
                <div class="home-new">
                    <a href="">有新消息，点击查看</a>
                </div>
                <div class="home-left-content">
                    <div class="left-content-box">
                        <div class="content-detail">
                            <div class="content-header">
                                <div class="content-user-img">
                                    <a href=""><img src="../img/user.jpg" alt=""></a>
                                </div>
                                <div class="text-title-left">
                                    <ul>
                                        <li class="title-name"><a href="">头条新闻</a></li>
                                        <li class="title-detail"><a href="">javaScript,vue</a></li>
                                    </ul>
                                </div>

                                <div class="text-title-right">
                                    <a href=""><i></i>888</a>
                                </div>
                            </div>
                            <div class="text-details">
                                <ul>
                                    <li class="text-detail notices">突然被吐了一身！买了身新衣服，结果万万没想到</li>
                                    <li class="detail-img">
                                        <img src="../images/5.jpg" alt="">
                                    </li>
                                    <li class="detail-code">
                                        <pre><code class="atelier-cave-dark">
        .content-text {
            flex: 1;
            overflow: hidden;
        }
                                        </code></pre>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="box-footer">
                            <ul>
                                <li class=""><a href=""><i class="fa fa-star"></i>收藏</a></li>
                                <li class=""><a href=""><i class="fa fa-twitter"></i>转发</a></li>
                                <li class=""><a href=""><i class="fa fa-comments-o"></i>评论</a></li>
                                <li class=""><a href=""><i class="fa fa-user"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="left-content-box">
                        <div class="content-detail">
                            <div class="content-header">
                                <div class="content-user-img">
                                    <a href=""><img src="../img/user.jpg" alt=""></a>
                                </div>
                                <div class="text-title-left">
                                    <ul>
                                        <li class="title-name"><a href="">头条新闻</a></li>
                                        <li class="title-detail"><a href="">javaScript,vue</a></li>
                                    </ul>
                                </div>

                                <div class="text-title-right">
                                    <a href=""><i></i>888</a>
                                </div>
                            </div>
                            <div class="text-details">
                                <ul>
                                    <li class="text-detail notices">突然被吐了一身！买了身新衣服，结果万万没想到</li>
                                    <li class="detail-img">
                                        <img src="../images/4.jpg" alt="">
                                    </li>
                                    <li class="detail-code">
                                        <pre><code class="atelier-cave-dark">
        .content-text {
            flex: 1;
            overflow: hidden;
        }
                                        </code></pre>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="box-footer">
                            <ul>
                                <li class=""><a href=""><i class="fa fa-star"></i>收藏</a></li>
                                <li class=""><a href=""><i class="fa fa-twitter"></i>转发</a></li>
                                <li class=""><a href=""><i class="fa fa-comments-o"></i>评论</a></li>
                                <li class=""><a href=""><i class="fa fa-user"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home-box-right">
                <div class="top-user-img">
                    <img src="../img/user.jpg" alt="">
                </div>
                <div class="right-top-user">
                    <div class="top-user-name"><span>无尽科技</span></div>
                    <ul class="top-user-content">
                        <li><span class="content-font">424</span><span>关注</span></li>
                        <li><span class="content-font">48</span><span>粉丝</span></li>
                        <li><span class="content-font">859</span><span>文章</span></li>
                    </ul>
                </div>
                <div class="right-tool">
                    <h3>快捷工具</h3>
                    <ul>
                        <li><a href=""><i class="fa fa-star"></i>我的收藏</a></li>
                        <li><a href=""><i class="fa fa-user"></i>我的赞</a></li>
                        <li><a href=""><i class="fa fa-twitter"></i>特别关注</a></li>
                        <li><a href=""><i class="fa fa-black-tie"></i>设置</a></li>
                    </ul>
                </div>
                <div class="right-hot">
                    <div class="hot-title clearfix">
                        <h3 class="hot-title-left">热门推荐</h3>
                        <h3 class="hot-title-right"><i class="fa fa-snapchat"></i><span>换一换</span></h3>
                    </div>
                    <div class="hot-detail">
                        <a href="">
                            <ul>
                                <li class="hot-icon"><i class="fa fa-reply"></i></li>
                                <li class="hot-notices notices"><span class="">国家反诈中心APP有</span></li>
                                <li class="hot-info notices"><span>120</span><span>万</span></li>
                            </ul>
                        </a>
                        <a href="">
                            <ul>
                                <li class="hot-icon"><i class="fa fa-reply"></i></li>
                                <li class="hot-notices notices"><span class="">现代潮流如何演绎古代</span></li>
                                <li class="hot-info notices"><span>10</span><span>万</span></li>
                            </ul>
                        </a>
                        <a href="">
                            <ul>
                                <li class="hot-icon"><i class="fa fa-github-square"></i></li>
                                <li class="hot-notices notices"><span class="">成年了还可以保留公主</span></li>
                                <li class="hot-info notices"><span>20</span><span>万</span></li>
                            </ul>
                        </a>
                        <a href="">
                            <ul>
                                <li class="hot-icon"><i class="fa fa-camera-retro"></i></li>
                                <li class="hot-notices notices"><span class="">学历对生活的影响有多</span></li>
                                <li class="hot-info notices"><span>125</span><span>万</span></li>
                            </ul>
                        </a>
                    </div>
                </div>
                <div class="right-news">
                    <h3 class="news-title">公示栏</h3>
                    <ul>
                        <li><a href=""><i class="fa fa-star"></i><span>经研究决定，公司于2020年11月初召开经营生产例会。</span></a></li>
                        <li><a href=""><i class="fa fa-user"></i><span>传达学习中宣部召开的部分省区市宣传部长座谈会精神</span></a></li>
                        <li><a href=""><i class="fa fa-twitter"></i><span></span>为使我公司各部门工作顺利的开展，并且保证各部门之间能够衍接顺畅，有效地提高工作效率。经公司领导研究决定将定期召开公司员工例会。</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-modal hide" id="tab">
        <div class="footer-title">
            <ul class="footer-top">
                <li class="footer-top-active"><span>纯色</span></li>
                <li><span>图片</span></li>
                <li><span>自定义</span></li>
                <a class="footer-top-close" id="close"><i class="fa fa-close"></i></a>
            </ul>
        </div>
        <div class="div-height"></div>
        <div class="modal-content">
            <div class="modal-tab modal-public" style="display: block">
                <ul>
                    <li class="border-img">
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                </ul>
            </div>
            <div class="modal-tab modal-public">
                <ul>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                </ul>
            </div>
            <div class="modal-tab modal-public modal-upload">
                <ul>
                    <li>
                        <label>
                            <input type="file" class="upload-img" hidden="hidden">
                            <img src="../img/upload.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="radio" name="choice" hidden="hidden">
                            <img src="../img/1.jpg" alt="">
                        </label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="modal-button">
            <div class="button-style">
                <button>确认</button>
                <button>取消</button>
            </div>
        </div>
    </div>
</section>
<script>
    window.onload = function () {
        let oDiv = document.getElementById("tab");
        let oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
        let A = document.getElementsByClassName('modal-tab');
        for (let i = 0; i < oLi.length; i++) {
            oLi[i]['index'] = i;
            oLi[i].onclick = function () {
                for (let j = 0; j < oLi.length; j++) {
                    oLi[j].className = ''
                }
                for (let i = 0; i < A.length; i++) {
                    A[i].style.display = 'none';
                }
                oLi[this.index].className = 'footer-top-active'
                A[this.index].style.display = 'block'
            }
        }
    }
</script>
<script>
    let a = document.getElementById('tab')
    let b = document.getElementById('close')
    let c = document.getElementById('top-open')

    b.onclick = function () {
        a.className = 'hide footer-modal';
    }
    c.onclick = function () {
        a.classList.remove('hide')
    }
</script>
</body>
</html>